<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>08 百度换肤</title>
  <style>
    * {
      margin: 0;
      padding: 0
    }

    body {
      background: url("images/5.jpg") top center;
    }

    .box {
      height: 150px;
      background-color: rgba(255, 255, 255, 0.3);
      text-align: center;
      /*line-height: 200px;*/
      padding-top: 50px;
    }

    .box img {
      cursor: pointer;
    }
  </style>
  <script>
    window.onload = function () {
      var pic1 = document.getElementById("pic1");
      var pic2 = document.getElementById("pic2");
      var pic3 = document.getElementById("pic3");
      pic1.onclick = function () {
        document.body.style.backgroundImage = "url('images/1.jpg')"
      };
      pic2.onclick = function () {
        document.body.style.backgroundImage = "url('images/2.jpg')"
      };
      pic3.onclick = function () {
        document.body.style.backgroundImage = "url('images/3.jpg')"
      }

    }
  </script>
</head>
<body>
<div class="box">
  <img src="images/1.jpg" alt="" width="150px" id="pic1">
  <img src="images/2.jpg" alt="" width="150px" id="pic2">
  <img src="images/3.jpg" alt="" width="150px" id="pic3">
</div>

</body>
</html>